<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
      width: 1300px;
    }

    #box {
      width: 1200px;
      height: 400px;
      border: 2px solid red;
      margin: 100px auto;
    }

    #box li {
      background: url(./img/fq1.jpg);
      float: left;
      width: 240px;
      height: 400px;
    }
    /* li 标签的背景图，需要使用 js 代码动态添加 */
  </style>
</head>

<body>
  <div id="box">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <script src="jquery-1.12.4.js"></script>
  <script>
    // 
    var $lis = $("#box li")
    $lis.each(function (i) {
      $(this).css("background", 'url(./img/fq'+(i+1)+'.jpg)')
    })
    // 动画
    $lis.mouseenter(function () {
      $(this).siblings().animate({"width":"100px"},1000)
      $(this).animate({"width":"800px"},1000)
    })
    $lis.mouseleave(function () {
      $lis.animate({"width":"240px"},1000)
    })

    // var instate = true;
    // $lis.mouseenter(function () {
    //   if ($lis.is(":animated")) {
    //     return;
    //   }
    //   instate = true;
    //   $(this).siblings().animate({"width":"100px"},1000)
    //   $(this).animate({"width":"800px"},1000)
    // })
    // $lis.mouseleave(function () {
    //   if ($lis.is(":animated") && !instate) {
    //     return;
    //   }
    //   if (instate) {
    //     $lis.animate({"width":"240px"},1000)
    //   }
    //   instate = false;
    // })
  </script>
</body>

</html>